<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="02practice_css.css">
    <title>CSS盒子的复习</title>
</head>

<body>
    <div class="box pos_sticky">
        我是粘贴定位
    </div>
    <div class="block-box">
        <h1>我是块级盒子。</h1>
        <h1>我是块级盒子。</h1>
    </div>
    <span class="inline-box">
    <span>我是内联盒子。</span>
    <span>我是内联盒子。</span>
    </span>


    <div class="normative-box">
        <p>我是一个标准盒子。</p>
    </div>

    <div class="box pos_static">静态定位（默认）</div>

    <div class="box">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):相对定位在我下面</div>
    <div class="box pos_relative">相对定位</div>
    <div class="box">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):相对定位在我下面</div>

    <div class="box">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):固定定位在我下面</div>
    <div class="box pos_fixed">固定定位</div>
    <div class="box">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):固定定位在我上面</div>

    <div class="box display">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):绝对对定位在我下面</div>
    <div class="box pos_absolute">绝对定位</div>
    <div class="box">(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・(・∀・*):绝对定位在我上面</div>

    <div class="box">┑(￣Д ￣)┍粘贴定位在乱跑</div>

    <div>
        <div class="box float">我要浮起来</div>
        <div class="box float">我要浮起来</div>
        <div class="box float">我要浮起来</div>
        <div class="box float">我要浮起来</div>
    </div>
    <div class="box unfloat">我不想浮动,我被挤了（＞人＜；）</div>

    <div class="box clf">我消除了浮动(/▽＼)</div>
</body>

</html>